<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Bee-mall首页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/winResponsive.js"></script>
</head>
<body>
<header>
    <div class="container">
        <a href="" class="logo">
            <img src="images/index/logo.png" alt="">
        </a>
        <form action="" class="search">
            <img src="images/index/search.png" height="37" width="38"/>
            <input type="text" placeholder="输入商家，分类或商圈">
        </form>
        <a href="" class="sm">
            <img src="images/index/sys.png" alt="">
        </a> <a href="" class="l">
        <img src="images/index/l.png" alt="">
    </a>
    </div>
</header>
<section class="content">
    <section class="banner">
        <ul class="lb">
            <li><a href=""><img src="images/index/banner.png" alt=""></a></li>
            <li><a href=""><img src="images/index/banner.png" alt=""></a></li>
            <li><a href=""><img src="images/index/banner.png" alt=""></a></li>
            <li><a href=""><img src="images/index/banner.png" alt=""></a></li>
            <li><a href=""><img src="images/index/banner.png" alt=""></a></li>
            <li><a href=""><img src="images/index/banner.png" alt=""></a></li>
        </ul>
        <div class="btn"></div>
    </section>
    <script type="text/javascript">
        var ul = document.querySelector('ul.lb');
        var list = document.querySelectorAll('.lb li');
        var btn = document.querySelector('.btn');
        var n = list.length;//图片数量
        var g = 0;
        var T = setInterval(run, 1000);
        // 创建span标签
        for(var j = 1; j <= n; j++) {
            var span = document.createElement('span');
            span.innerHTML = j;
            btn.appendChild(span)
        }
        var spans = document.querySelectorAll('.btn span');

        spans.forEach(function(v, index){
            if(index == g) {
                v.className = 'cor'
            }
        })
        function run() {
            if (g == n) {
                g = 0;
            }
            ul.style.left = -1 * 7.5 * g + "rem";
            spans.forEach(function (v,index) {
                v.classList.remove('cor');
                if (index==g){
                    v.className='cor'
                }
            });
            g++;
        }
        ul.onmouseover = function() {
            clearInterval(T)
        };

        ul.onmouseout = function() {
            T = setInterval(run, 1000)
        };
    </script>
    <nav>
        <section class="container">
            <figure>
                <a href="" class="hot dase"><img src="images/index/cj.png" alt=""></a>
                <figcaption>闪送超市</figcaption>
            </figure>
            <figure>
                <a href=""><img src="images/index/cj.png" alt=""></a>
                <figcaption>闪送超市</figcaption>
            </figure>
            <figure>
                <a href=""><img src="images/index/cj.png" alt=""></a>
                <figcaption>闪送超市</figcaption>
            </figure>
            <figure>
                <a href=""><img src="images/index/cj.png" alt=""></a>
                <figcaption>闪送超市</figcaption>
            </figure>
        </section>
    </nav>
    <section class="product">
        <ul>
            <li>
                <a href="">
                    <section class="left">
                        <h3>Fresh奶</h3>
                        <p class="desc">光明畅优乳杆菌<span class="big">6</span>元/<span class="small">2</span>瓶</p>
                        <p class="more">
                            更多优惠 低至五折
                        </p>
                    </section>
                    <section class="right"><img src="images/index/pro.jpg" alt=""></section>
                </a>
            </li>
            <li>
                <a href="">
                    <section class="left">
                        <h3>Fresh奶</h3>
                        <p class="desc">光明畅优乳杆菌<span class="big">6</span>元/<span class="small">2</span>瓶</p>
                        <p class="more">
                            更多优惠 低至五折
                        </p>
                    </section>
                    <section class="right"><img src="images/index/img.png" alt=""></section>
                </a>
            </li>
            <li>
                <a href="">
                    <section class="left">
                        <h3>Fresh奶</h3>
                        <p class="desc">光明畅优乳杆菌<span class="big">6</span>元/<span class="small">2</span>瓶</p>
                        <p class="more">
                            更多优惠 低至五折
                        </p>
                    </section>
                    <section class="right"><img src="images/index/pro.jpg" alt=""></section>
                </a>
            </li>
        </ul>
    </section>

</section>
<footer>
    <nav class="container">
        <a href="" class="home">
            <img src="images/index/sy.png" alt="">
            <p>首页</p>
        </a>
        <a href="">
        <img src="images/index/ss.png" alt="">
        <p>闪送超市</p>
    </a>
        <a href="">
        <img src="images/index/wd.png" alt="">
        <p>我的</p>
    </a>
        <a href="">
        <img src="images/index/gwc.png" alt="">
        <p>&yen;0起送</p>
    </a>
    </nav>
</footer>
</body>
</html>